<template>
  <div>
    <h1>门店修改</h1>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td align="right">门店名称</td>
          <td><input type="text" v-model="ojbInfo.Name" /></td>
        </tr>
        <tr>
          <td align="right">门店电话</td>
          <td><input type="text" v-model="ojbInfo.Phone" /></td>
        </tr>
        <tr>
          <td align="right">门店地址</td>
          <td><input type="text" v-model="ojbInfo.Address" /></td>
        </tr>
        <tr>
          <td align="right">是否启用</td>
          <td>
            <input
              type="radio"
              v-model="ojbInfo.State"
              name="Isno"
              :value="1"
              checked
            />是
            <input
              type="radio"
              v-model="ojbInfo.State"
              name="Isno"
              :value="0"
            />否
          </td>
        </tr>
        <tr>
          <td align="right">上传图片</td>
          <td><input type="file" :value="ojbInfo.Photo" @click="UpImg" /></td>
        </tr>
        <tr>
          <td align="right"></td>
          <td><input type="button" value="修改" @click="ok" /></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script setup lang="ts">
import axios from "axios";
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();

//反填对象
let ojbInfo = ref({
  Id: route.query.Id,
  Name: "",
  Phone: "",
  Address: "",
  Photo: "",
  State: 0,
});

// //修改对象
// let upInfo = reactive({
//   Id: route.query.Id,
//   Name: "",
//   Phone: "",
//   Address: "",
//   Photo: "",
//   State: 0,
// });

//函数===============================================================

onMounted(() => {
  FanTian();
});

//门店反填
const FanTian = () => {
  axios({
    url: "https://localhost:7142/api/Shop/GetShopId",
    method: "GET",
    params: {
      id: route.query.id,
    },
  })
    .then((res) => {
      ojbInfo.value = res.data;
    })
    .catch((arr) => {
      alert("反添失败");
    });
};

//1.上传图片
const UpImg = (e: any) => {
  //将文件转换成FormData格式
  var obj = e.target.file[0];
  var f = new FormData();
  f.append("file", obj);
  //发送网络请求
  axios({
    url: "/api/UpImg/UpImg",
    method: "post",
    data: f,
  })
    .then((res) => {
      console.log(res);
      alert("上传成功");
      ojbInfo.value.Photo = "https://localhost:7142" + res.data.datas;
    })
    .catch((arr) => {
      alert("上传失败");
    });
};

//添加
const ok = () => {
  //   //1.
  //   if (ojbInfo.value.Photo == "") {
  //     alert("图片不可为空");
  //   }
  axios({
    url: "https://localhost:7142/api/Shop/UpShop",
    method: "PUT",
    data: ojbInfo.value
  })  
    .then((res) => {
      if (res.data == -1) {
        alert("名称不可重复");
        return;
      }
      alert("修改成功");
      router.push("/shopList");
    })
    .catch((arr) => {
      alert("修改失败");
    });
    console.log(ojbInfo.value);
};
</script>

<style scoped></style>
